<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!-- 访问的基本路径,此页面的所有的跳转都是基于此地址作为基本地址 -->
<base href="<%=basePath%>">


<meta charset="utf-8" />
<title></title>
<!--主题样式-->
<link rel="stylesheet" type="text/css" href="resources/easyui/themes/default/easyui.css">
<!--图标样式-->
<link rel="stylesheet" type="text/css" href="resources/easyui/themes/icon.css">
<!--jquery文件-->
<script type="text/javascript" src="resources/easyui/jquery.min.js"></script>
<!--easyui的核心js-->
<script type="text/javascript" src="resources/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="resources/easyui/datagrid-filter.js"></script>

<!-- 引入中文文件 -->
<script type="text/javascript" src="resources/easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
	$(function() {

		$('#label_cid').combogrid(
				{
					panelWidth : 420,
					idField : 'label_id',
					textField : 'label_name',
					url : "songList/getAllLabel.do",
					fitColumns : true,
					striped : true,
					editable : true,

					pagination : true,
					rownumbers : true,
					collapsible : false,
					fit : true,
					method : 'post',
					columns : [ [ {
						field : 'label_id',
						title : '标签编号',
						width : 80
					}, {
						field : 'label_name',
						title : '标签名称',
						width : 150
					}, ] ],
					keyHandler : {
						query : function(keyword) {
							var queryParams = $('#label_cid').combogrid("grid")
									.datagrid('options').queryParams;
							queryParams.keyword = keyword;
							$('#label_cid').combogrid("grid").datagrid(
									'options').queryParams = queryParams;
							$('#label_cid').combogrid("grid").datagrid('load',
									{
										keyword : keyword,
									});

							$('#label_cid').combogrid("setValue", keyword);
							$('#labelKeyword').val(keyword);
						}
					},
					onSelect : function(rowIndex, rowData) {
						var rows = $("#label_id").datagrid("getRows")
						var flag = false;
						for (var i = 0; i < rows.length; i++) {
							var row = rows[i];
							if (row.label_id == rowData.label_id) {
								index = i;
								flag = true;
								break;
							}
						}
						if (flag) {
							$("#label_id").datagrid("selectRow", index);
						} else {
							$("#label_id").datagrid("appendRow", rowData)
						}
					}
				});

		$('#song_cid')
				.combogrid(
						{
							panelWidth : 420,
							idField : 'song_id',
							textField : 'song_name',
							url : "songList/getAllSong.do",
							fitColumns : true,
							striped : true,
							editable : true,

							pagination : true,
							rownumbers : true,
							collapsible : false,
							fit : true,
							method : 'post',
							columns : [ [ {
								field : 'song_id',
								title : '歌曲编号',
								width : 80
							}, {
								field : 'song_name',
								title : '歌曲名称',
								width : 150
							}, ] ],
							keyHandler : {
								query : function(keyword) {
									var queryParams = $('#song_cid').combogrid(
											"grid").datagrid('options').queryParams;
									queryParams.keyword = keyword;
									$('#song_cid').combogrid("grid").datagrid(
											'options').queryParams = queryParams;
									$('#song_cid').combogrid("grid").datagrid(
											'load', {
												keyword : keyword,
											});

									$('#song_cid').combogrid("setValue",
											keyword);
									$('#songKeyword').val(keyword);
								}
							},
							onSelect : function(rowIndex, rowData) {
								var rows = $("#song_id").datagrid("getRows")
								var flag = false;
								for (var i = 0; i < rows.length; i++) {
									var row = rows[i];
									if (row.song_id == rowData.song_id) {
										index = i;
										flag = true;
										break;
									}
								}
								if (flag) {
									$("#song_id").datagrid("selectRow", index);
								} else {
									$("#song_id")
											.datagrid("appendRow", rowData)
								}
							}
						});

		$('#user_cid')
				.combogrid(
						{
							panelWidth : 420,
							idField : 'user_id',
							textField : 'song_name',
							url : "songList/getAllUser.do",
							fitColumns : true,
							striped : true,
							editable : true,

							pagination : true,
							rownumbers : true,
							collapsible : false,
							fit : true,
							method : 'post',
							columns : [ [ {
								field : 'user_id',
								title : '用户编号',
								width : 80
							}, {
								field : 'user_name',
								title : '用户姓名',
								width : 150
							}, ] ],
							keyHandler : {
								query : function(keyword) {
									var queryParams = $('#user_cid').combogrid(
											"grid").datagrid('options').queryParams;
									queryParams.keyword = keyword;
									$('#user_cid').combogrid("grid").datagrid(
											'options').queryParams = queryParams;
									$('#user_cid').combogrid("grid").datagrid(
											'load', {
												keyword : keyword,
											});

									$('#user_cid').combogrid("setValue",
											keyword);
									$('#userKeyword').val(keyword);
								}
							},
							onSelect : function(rowIndex, rowData) {
								var rows = $("#user_id").datagrid("getRows")
								var flag = false;
								for (var i = 0; i < rows.length; i++) {
									var row = rows[i];
									if (row.user_id == rowData.user_id) {
										index = i;
										flag = true;
										break;
									}
								}
								if (flag) {
									$("#user_id").datagrid("selectRow", index);
								} else {
									$("#user_id").datagrid("loadData", {
										rows : []
									});
									$("#user_id")
											.datagrid("appendRow", rowData)
								}
							}
						});

		$("#myDataGrid").datagrid({
			url : 'songList/songListList.do',
			pagination : true,
			singleSelect : true,//只能选中一行
			/* pageSize : 2,
			pageList : [ 2, 4, 6 ], */
			fit : true,
			fitColumns : true, //让对应的列按照比例设置宽度 ,如果不设置此属性,表头设置width就是固定宽度
			toolbar : "#toolbar",
		})

		$("#user_id").datagrid({
			//pagination : true,
			singleSelect : true,//只能选中一行
			fitColumns : true,
			onDblClickRow : function(rowIndex, rowData) {
				$("#user_id").datagrid("deleteRow", rowIndex);
			}
		})

		$("#label_id").datagrid({
			//pagination : true,
			singleSelect : true,//只能选中一行
			fitColumns : true,
			onDblClickRow : function(rowIndex, rowData) {
				$("#label_id").datagrid("deleteRow", rowIndex);
			},
		//toolbar : "#labelSeachToolbar",
		})

		$("#song_id").datagrid({
			//pagination : true,
			singleSelect : true,//只能选中一行
			fitColumns : true,
			onDblClickRow : function(rowIndex, rowData) {
				$("#song_id").datagrid("deleteRow", rowIndex);
			},
		})

		$("#myDialog").dialog({
			buttons : "#dialogButtons",
			closed : true,
		})

	});

	function searchSongList(value) {
		$("#myDataGrid").datagrid('load', {
			keyword : value,
		});
	}

	//使用json对象封装页面的所有js函数
	var cmdObj = {
		//新增打开对话框
		openDialog : function() {
			$("#myDialog").dialog("open");
			$("#myDialog").dialog("setTitle", "新增歌单");
			$("#songList_id").val("");
			$("#songList_name").val("");
			$("#songList_info").val("");
			$("#songList_like").val("");
			$("#songList_hit").val("");
			$("#label_id").datagrid("loadData", {
				rows : []
			});
			$("#song_id").datagrid("loadData", {
				rows : []
			});
			$("#user_id").datagrid("loadData", {
				rows : []
			});
			$('#label_cid').combogrid("setValue", "");
			$('#song_cid').combogrid("setValue", "");
			$('#user_cid').combogrid("setValue", "");
		},
		saveOrUpdateSongList : function() {
			var songList_id = $("#songList_id").val();
			var url = "";
			if (songList_id != "") {
				url = "songList/updateSongList.do"
			} else {
				url = "songList/addSongList.do";
			}

			$("#songListFrom").form('submit', {
				url : url,
				onSubmit : function(param) {
					var userRow = $("#user_id").datagrid("getRows");
					var labelRows = $("#label_id").datagrid("getRows");
					var songRows = $("#song_id").datagrid("getRows");

					if (userRow.length == 0) {
						$.messager.alert("温馨提示", "亲,请选择用户!!", 'warning');
						return false;
					}
					if (labelRows.length == 0) {
						$.messager.alert("温馨提示", "亲,请至少选择一个标签!!", 'warning');
						return false;
					}
					if (songRows.length == 0) {
						$.messager.alert("温馨提示", "亲,请至少选择一首歌曲!!", 'warning');
						return false;
					}
					var user_id = userRow[0].user_id;
					param.user_id = user_id;

					var label_id = "";
					for (var i = 0; i < labelRows.length; i++) {
						var labelRow = labelRows[i];
						label_id += labelRow.label_id + ","
					}
					label_id = label_id.substring(0, label_id.length - 1);
					param.songList_label = label_id;

					var song_id = "";
					for (var i = 0; i < songRows.length; i++) {
						var songRow = songRows[i];
						song_id += songRow.song_id + ","
					}
					song_id = song_id.substring(0, song_id.length - 1);
					param.song_id = song_id;

					return true;
				},
				success : function(data) {
					data = eval("(" + data + ")");
					if (data.code == 1) {
						$.messager.alert("温馨提示", data.msg, 'info');
						$("#myDialog").dialog("close");
						$("#myDataGrid").datagrid("reload");
					} else {
						$.messager.alert("温馨提示", data.msg, 'error');
					}

				}
			});
		},
		del : function() {
			var rowData = $("#myDataGrid").datagrid("getSelected");
			if (rowData == null) {
				$.messager.alert("温馨提示", "请选择需要删除的行", 'warning');
				return;
			}
			$.messager.confirm('确认', '您确认想要删除记录吗？', function(r) {
				if (r) {
					var songList_id = rowData.songList_id;
					$.get("songList/deleteSongListById.do", {
						"songList_id" : songList_id
					}, function(data) {
						if (data.code == 1) {
							$.messager.alert("温馨提示", data.msg, 'info');
							$("#myDataGrid").datagrid("reload");
						} else {
							$.messager.alert("温馨提示", data.msg, 'error');
						}
					});
				}
			});
		},
		editRole : function() {
			$("#songList_id").val("");
			$("#songList_name").val("");
			$("#songList_info").val("");
			$("#songList_like").val("");
			$("#songList_hit").val("");
			$('#label_cid').combogrid("setValue", "");
			$('#song_cid').combogrid("setValue", "");
			$('#user_cid').combogrid("setValue", "");

			var rowData = $("#myDataGrid").datagrid("getSelected");
			if (rowData == null) {
				$.messager.alert("温馨提示", "请选择需要修改的行", 'warning');
				return;
			}

			$("#songListFrom").form("load", rowData);
			$("#myDialog").dialog("open");
			$("#myDialog").dialog("setTitle", "编辑歌单");

			$("#label_id").datagrid({
				url : "songList/myLabel.do?songList_id=" + rowData.songList_id
			})
			$("#song_id").datagrid({
				url : "songList/mySong.do?songList_id=" + rowData.songList_id
			})
			$("#user_id").datagrid({
				url : "songList/myUser.do?songList_id=" + rowData.songList_id
			})
		},
		reload : function() {
			$("#myDataGrid").datagrid("load");
		},
		closeDialog : function() {
			$("#myDialog").dialog("close");
		}
	}
</script>


<div id="myDialog" class="easyui-dialog" data-options="width:900,height:450,closed:true">
	<form id="songListFrom" action="" method="post">
		<table style="margin-top: 10;" align="center">
			<tr>
				<td><input type="hidden" id="songList_id" name="songList_id"></td>
			</tr>
			<tr>
				<td style="width: 180px">歌单名称: <input style="width: 140px" id="songList_name" name="songList_name"
					class="easyui-validatebox" data-options="{required:true}">
				</td>
				<td tyle="width: 180px">收藏次数<input input style="width: 140px" id="songList_like" name="songList_like"></td>
				<td tyle="width: 180px">歌单热度<input input style="width: 140px" id="songList_hit" name="songList_hit"></td>
				<td style="width: 220px">歌单状态:正常<input type="radio" name="songList_status" value="0" checked="checked">
					禁用<input type="radio" name="songList_status" value="1">
				</td>
			</tr>
			<tr>
				<td><input id="label_cid" class="easyui-combogrid" /> <input type="hidden" id="labelKeyword" /></td>
				<td><input id="user_cid" class="easyui-combogrid" /> <input type="hidden" id="userKeyword" /></td>
				<td><input id="song_cid" class="easyui-combogrid" /> <input type="hidden" id="songKeyword" /></td>
				<td>歌单简介</td>
			</tr>

			<tr>
				<td>
					<table id="label_id" style="width: 222px; height: 250px" class="easyui-datagrid" data-options="{'title':'标签列表'}">
						<thead>
							<th data-options="field:'label_id',width:1">标签序号</th>
							<th data-options="field:'label_name',width:1">标签名称</th>
						</thead>
					</table>
				</td>
				<td>
					<table id="user_id" style="width: 222px; height: 250px" class="easyui-datagrid" data-options="{'title':'用户列表'}">
						<thead>
							<th data-options="field:'user_id',width:1">用户序号</th>
							<th data-options="field:'user_name',width:1">用户名称</th>
						</thead>
					</table>
				</td>
				<td>
					<table id="song_id" style="width: 222px; height: 250px" class="easyui-datagrid" data-options="{'title':'歌曲列表'}">
						<thead>
							<th data-options="field:'song_id',width:1">歌曲序号</th>
							<th data-options="field:'song_name',width:1">歌曲名称</th>
						</thead>
					</table>
				</td>
				<td><textarea rows="13" cols="25" id="songList_info" name="songList_info" class="easyui-validatebox"
						placeholder="请输入歌单简介" data-options="{required:true}"></textarea></td>
			</tr>
		</table>

	</form>

</div>

<!-- 对话框底部的工具条 -->
<div id="dialogButtons">
	<a onclick="cmdObj.saveOrUpdateSongList();" class="easyui-linkbutton" data-options="{iconCls:'icon-save',plain:true}">保存</a>
	<a onclick="cmdObj.closeDialog();" class="easyui-linkbutton" data-options="{iconCls:'icon-cancel',plain:true}">取消</a>
</div>




<!-- datagird 顶部工具条 -->
<div id="toolbar">
	<a onclick="cmdObj.openDialog();" class="easyui-linkbutton" data-options="{iconCls:'icon-add',plain:true}">新增</a> <a
		onclick="cmdObj.editRole();" class="easyui-linkbutton" data-options="{iconCls:'icon-edit',plain:true}">修改</a> <a
		onclick="cmdObj.del();" class="easyui-linkbutton" data-options="{iconCls:'icon-remove',plain:true}">删除</a> <a
		class="easyui-linkbutton" data-options="{iconCls:'icon-reload',plain:true}">刷新</a>
	<div id="tb" style="float: right;">
		<input id="ss" class="easyui-searchbox" prompt="请输入歌单名" data-options="searcher:searchSongList"
			style="width: 130px; vertical-align: middle;"></input>
	</div>

</div>



<!-- datagrid 组件 -->
<table id="myDataGrid" class="easyui-datagrid">
	<thead>
		<tr>
			<th data-options="field:'songList_id',width:1">歌单编号</th>
			<th data-options="field:'songList_name',width:1">歌单名称</th>
			<th data-options="field:'songList_hit',width:1">歌单热度</th>
			<th data-options="field:'songList_info',width:1">歌单简介</th>
			<th data-options="field:'songList_like',width:1">收藏次数</th>
			<th data-options="field:'songList_label',width:1">标签</th>
		</tr>
	</thead>
</table>